<!--
 * @FileDescription:
 * @Author: cjw
 * @Date: 2022/2/10 9:44
 -->
<template>
<div>
  <el-row style="text-align: left">
    <el-col :span="4" style="text-align: center">
      <el-avatar :size="50" :src="info.userHeadImage"></el-avatar>
    </el-col>
    <el-col :span="11" style="text-align: left">
      <p style="color: #99a9bf">{{info.userName}}</p>
      <p style="color: rosybrown">{{info.addTime}}</p>
    </el-col>
    <el-col :span="3" style="text-align: left">
      <el-tag v-if="info.state==0">进行中</el-tag>
      <el-tag type="success" v-if="info.state==1">已结束</el-tag>
      <el-tag type="danger" v-if="info.state==2">已取消</el-tag>
    </el-col>
    <el-col :span="5" style="text-align: left">
      <h2 style="color: #99a9bf">{{info.joinNumber}} 人参与</h2>
    </el-col>
  </el-row>
  <br/>
  <el-row style="text-align: left">
    <el-col >
      <h4>
        {{info.content}}
      </h4>
    </el-col>
  </el-row>
  <br/>
  <el-row style="align-item:center">
    <el-col :span="8" >
      <el-tag
        key="beginTime"
        type="info"
        effect="dark">
        {{ info.beginTime }}
      </el-tag>
      ---
      <el-tag
        key="endTime"
        type="warning"
        effect="dark">
        {{ info.endTime }}
      </el-tag>
    </el-col>
    <el-col :span="6" style="text-align: left">
      <h2 style="color: deepskyblue">{{info.days}}</h2>
    </el-col>
    <el-col :span="6" style="text-align: left">
      <el-button size="small" type="info" v-if="info.join==1 && info.state==0" @click="clockOutPlan" round>取消打卡</el-button>
      <el-button size="small" type="primary" v-if="info.join==2 && info.state==0" @click="clockInPlan"  round>打卡</el-button>
      <el-button size="small" type="primary" v-if="info.join==0 && info.state==0" @click="joinPlan" round>参与计划</el-button>
    </el-col>
  </el-row>
</div>
</template>

<script>

import {clockInPlan, clockOutPlan, joinPlan} from "@/api/plan";

export default {
  name: "detailPlan",
  props: ['id','info'],
  data() {
    return {

    }
  },
  methods: {
    joinPlan() {
      joinPlan(this.id).then(res => {
        if (res.body.data) {
          this.$message.success("成功参加")
          this.info.join = true
        }
      })
    },
    clockInPlan() {
      clockInPlan(this.id).then(res => {
        if (res.body.data) {
          this.$message.success("打卡成功")
          this.info.join = 1
        }
      })
    },
    clockOutPlan() {
      clockOutPlan(this.id).then(res => {
        if (res.body.data) {
          this.$message.success("取消打卡成功")
          this.info.join = 2
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
